import { Navigate } from "react-router-dom";
import Loadable from "react-loadable";
// import About from "@/pages/About";
// import Home from "@/pages/Home";
interface Props {
  isLoading: boolean;
  error: any;
}

const MyLoadingComponent = (props: Props) => {
  if (props.isLoading) {
    return <div>Loading...</div>;
  } else if (props.error) {
    return <div>Sorry, there was a problem loading the page.</div>;
  } else {
    return null;
  }
};

const About = Loadable({
  loader: () => import(/* webpackChunkName: "about" */ "../pages/About/"),
  loading: MyLoadingComponent,
});

const Home = Loadable({
  loader: () => import(/* webpackChunkName: "home" */ "../pages/Home/"),
  loading: MyLoadingComponent,
});

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
  },
  {
    // 路由重定向
    path: "/",
    element: <Navigate to="/home" />,
  },
] as {
  path: string;
  element: JSX.Element;
}[];
